<template>
	<table class="i-table" border="1">
		<thead>
			<tr>
				<th v-for="head in headers1" :key="head.key">{{ head.label || head.key }}</th>
				<th v-if="$scopedSlots.tools">操作</th>
			</tr>
		</thead>
		<tbody>
			<tr v-for="(item, i) in list" :key="i">
				<td v-for="head in headers1" :key="head.key" :class="{type:head.type,[head.type]:true}">
					<textarea
						v-if="head.type == 'textarea'"
						v-model="item[head.key]"
						@change="onChange(item, head)"
					></textarea>
					<input
						v-else-if="head.type"
						:type="head.type"
						v-model="item[head.key]"
						@change="onChange(item, head)"
					></input>
					<template v-else>{{ item[head.key] }}</template>
				</td>
				<td v-if="$scopedSlots.tools">
					<slot name="tools" :item="item"></slot>
				</td>
			</tr>
		</tbody>
	</table>
</template>
<script>
export default {
	name: "ITable",
	components: {},
	props: {
		list: Array,
		headers: Object,
	},
	data() {
		return {};
	},
	computed: {
		headers1() {
			if (this.headers) return this.headers;
			if (!this.list || !this.list.length) return [];
			return Object.keys(this.list[0]).map((x) => ({key: x}));
		},
	},
	mounted() {
	},
	methods: {
		onChange(item, head) {
			this.$emit("change", {item, head});
		},
	},
};
</script>
<style>
.i-table {
	border-collapse: collapse;
	margin: 6px 0;
}
td,
th {
	padding: 6px;
	min-width: 60px;
}
td.type {
	padding: 0;
}
td > input,
td > textarea {
	width: 100%;
	height: 100%;
	margin: 0;
	border: none;
	padding: 6px;
	box-sizing: border-box;
	border-bottom: 1px solid #33a7ff;
	outline: none;
}
td > [type="number"] {
	width: 80px;
}
</style>
